*{margin: 0; padding: 0;}
html,body{height: 100%;}
ul{list-style: none;}
h1,h2,h3{font-size: 14px; font-weight: normal;}
.fl{float: left;}
.fr{float: right;}
.relative{position: relative;}


.continer{padding-top: 38px; margin-left: 225px; font-size: 14px; font-family: "simsun,microsoft yahei"; line-height: 1;}
.address-title{line-height: 36px; padding-left: 4px; background: #eaeaea; overflow: hidden; color: #999; font-size: 14px; font-weight: bold;}
.address-title li{float: left; padding: 0 4px;}
.address-title li.active{color: #666;}

.main-title{padding-left: 10px; margin: 15px 0; border-left: 4px solid #36aa47; color: #3d3d3d; font-weight: bold; line-height: 1;}

.battery-info{overflow: hidden; border: 1px solid #DDDDDD; background: #f9f9f9;}
.battery-info li{float: left; min-width: 112px; height: 42px; padding: 0 40px 0 20px; margin: 10px 0; color: #999; position: relative;}
.battery-info li *{font-size: 12px !important;}
.battery-info li:after{display: block; content: ''; height: 40px; width: 1px; background: #ddd; position: absolute; top: 50%; right: 0; margin-top: -20px;}
.battery-info .active:after{display: none;}
.battery-info li h3{margin-bottom: 12px;}
.battery-info span{font-size: 16px; font-weight: bold; color: #3d3d3d;}
.battery-info strong{position: absolute; top: 26px; left: 26px; line-height: 21px; font-size: 16px; color: #3d3d3d;}
.battery-info .progress-bar{position: absolute; width: 0; height: 20px; top: 24px; left: 76px; background: #00a0e9;}
.battery-info img{position: absolute; width: 48px; height: 20px; top: 24px; left: 76px;}

#chartBox{width: 362px; height: 310px; float: left; border: 1px solid #DDDDDD;}
@media screen and (max-width: 1670px ){
	/*.battery-info li{width: 14%; padding: 0 4% 0 2%;}
	#chartBox{float: none !important;}
	.date-box{margin-left: 0 !important; margin-top: 20px !important;}*/
}

.battery-date{overflow: hidden; margin-top: 20px;}
.battery-date span.title{position: absolute; left: 0; top: 16px; padding-left: 10px; border-left: 4px solid #36aa47; color: #3d3d3d; font-weight: bold;}
.date-box{margin-left: 384px; height: 242px; padding-top: 68px; border: 1px solid #DDDDDD;}
.date-box .battery-item{width: 15.5%; float: left; height: 222px; margin-bottom: 20px; position: relative;}
.date-box .battery-item:after{display: block; content: ''; width: 1px; height: 100%; background: #ddd; position: absolute; right: 0; top: 0;}
.date-box .battery-item .progress-bar{width: 100px; height: 0; position: absolute; margin: 0 0 0 -50px; bottom: 16px; left: 50%; background: #8fc31f;}
.date-box .battery-item img{width: 100px; height: 190px; position: absolute; margin: -95px 0 0 -50px; top: 50%; left: 50%;}
.date-box .battery-item span{position: absolute; bottom: 20px; left: 34px; color: #000; z-index: 3;}
.date-box ul{margin-left: 15.5%; overflow: hidden;}
.date-box ul li{width: 33.333%; height: 222px; float: left; position: relative;}
/*.date-box ul li:after{display: block; content: ''; width: 1px; height: 100%; background: #ddd; position: absolute; right: 0; top: 0;}*/
.date-box ul .active:after{display: none;}

.date-box .item{height: 40px; margin: 0 0 45px 13%; position: relative;}
.date-box .item.last{margin-bottom: 21px;}
.date-box .item img{position: absolute; left: 0; top: 0;}
.date-box .item .right-side{margin-left: 58px;}
.date-box .item strong{display: block; margin-top: 0px; font-size: 16px;}
.date-box .item span{color: #999;}


.systemPanel{height: 100%; padding-top: 19px; margin-left: 225px; background: url(../image/bg_20x20.png); position: relative;}
.systemPanel .left-box{width: 438px; margin-left: 26px; position: relative; z-index: 2;}
.panel-title{text-align: center; line-height: 50px; font-size: 28px; color: #8af9f5; background: url(../image/1.png) no-repeat; background-size: 100% 100%;}
.bottom-item{overflow: hidden; line-height: 1; margin-top: 20px; margin-right: -10px;}
.bottom-item>div{background: rgba(255,255,255,.1); float: left; margin-right: 10px;}
.bottom-item .item{width: 112px; height: 109px; text-align: center; border-top: 1px solid #049d9d; color: #FFF;}
.bottom-item .item h3{color: #a5a5a5; padding-top: 20px; font-size: 12px;}
.bottom-item .item span{color: #FFF; display: block; padding-top: 26px; font-size: 36px;}

.bottom-item .item-2{color: #FFF; background: none;}
.bottom-item .item-2 p{margin-top: 10px; font-size: 24px;}

.systemPanel .right-box{width: 50%; height: 100%; position: absolute; right: 0; top: 20px; z-index: 2;}
.systemPanel .right-box ul{height: 100%; border-top: 1px solid #049d9d;}
.systemPanel .right-box li{height: 30%; margin-bottom: 10px; background: rgba(255,255,255,.1); border-top: 1px solid #049d9d;}
.systemPanel .right-box li.last{border: none; overflow: hidden;}
.systemPanel .right-box .list-item{width: 48%; height: 100%; float: left; border-top: 1px solid #049d9d;}
.systemPanel .right-box .list-item.last{margin-left: 4%;}

#battery-map{position: absolute !important; left: 0; bottom: 50px; z-index: 1;}